<template>
    <div class="pop-event-details">
        <!-- <el-drawer
            title="活动详情"
            :visible.sync="is_drawer"
            class="drawer-box"
        > -->
        <div class="content-box comm-list">
            <el-form ref="form" :model="form" label-width="90px">
                <el-form-item label="自定义标题">
                    <el-input
                        placeholder="请输入自定义标题"
                        v-model="form.title"
                    >
                    </el-input>
                </el-form-item>
                <!-- <el-form-item label="图文数量">
                    <el-select
                        v-model="form.img_txt"
                        class="select-w"
                        @change="setimgtxtNum"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item"
                            :label="item"
                            :value="item"
                        >
                        </el-option>
                    </el-select>
                    <span class="txt-d">对</span>
                </el-form-item> -->
                <div class="img-text-box">
                    <div
                        class="img-text-row"
                        v-for="(item, index) in form.info"
                        :key="index"
                    >
                        <el-form-item label="配图">
                            <div class="img-context">
                                <div class="img-box">
                                    <addPhoto
                                        ref="AddPhoto"
                                        :pList="item.img"
                                        :batchid="index"
                                        :idyun="idyun"
                                        actType="5"
                                        @uploadAavatar="uploadAavatar"
                                    ></addPhoto>
                                </div>
                                <div class="img-but">
                                    <div class="but">
                                        <el-button
                                            type="primary"
                                            size="mini"
                                            icon="el-icon-plus"
                                            @click="
                                                replaceImg(
                                                    item.img[0].url,
                                                    index
                                                )
                                            "
                                            >上传替换</el-button
                                        >
                                    </div>
                                    <div class="tis">
                                        请上传jpg, bmp, png, gif格式的图片
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="配文">
                            <el-input
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 10 }"
                                v-model="item.text"
                            >
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>
        <!-- </el-drawer> -->
        <imageCropper
            v-if="is_drawer"
            ref="imageCroppers"
            :src="editUrl"
            @confirm="confirm"
            @cancel="cancel"
        >
        </imageCropper>
    </div>
</template>

<script>
// import xxx from '@/components/comm/xxx.vue';
import addPhoto from "@/components/comm/AddPhoto.vue";
import imageCropper from "@/components/comm/ImageCropper.vue";

export default {
    props: ["idyun", "is_drawer"],

    components: {
        addPhoto,
        imageCropper,
    },
    computed: {},
    data() {
        return {
            editUrl: "",
            options: [],
            batchid: "",
            form: {},
        };
    },
    created() {
        this.setoptionsData();
    },
    mounted() {},
    methods: {
        initData(data) {
            // this.is_drawer = true;
            this.form = data;
        },
        setoptionsData() {
            for (let i = 1; i < 21; i++) {
                this.options.push(i);
            }
        },
        // 设置图文数量
        setimgtxtNum(num) {
            if (this.form.info.length == num) return;

            if (this.form.info.length > num) {
                let numletgth = this.form.info.length - num;
                this.form.info.splice(num, numletgth);
                // 减
            } else {
                // 加
                let numletgth = num - this.form.info.length;
                for (let i = 0; i < numletgth; i++) {
                    this.form.info.push({
                        img: [
                            {
                                url: "",
                                urls: "",
                            },
                        ],
                        text: "",
                    });
                }
            }
        },
        /*****上传图片成功*****/
        uploadPicSuccess(index, name, result, batchid) {
            // index= 图片索引(单图用不到)
            // name= 图片名称
            // result=图片信息(包含图片名称)
            // batchid=批次
            this.form.info.map((v, i) => {
                if (i == batchid) {
                    v.img[0].url = result.url;
                    v.img[0].urls = result.name;
                }
            });
        },
        /*******上传头像*******/
        uploadAavatar(data, batchid) {

            this.editUrl = data.url;
            this.batchid = batchid;
        },
        /*****确认编辑图片****/
        confirm(data) {
            this.$refs.AddPhoto[this.batchid].confirm(
                data,
                this.uploadPicSuccess
            );
        },

        /****取消上传****/
        cancel() {
            this.$refs.AddPhoto[this.batchid].cancel();
        },
        // 点击替换按钮
        replaceImg(url, index) {
            this.$refs.AddPhoto[index].chooseImage({ url }, 0);
        },
    },
};
</script>
<style lang="scss" scoped >
.content-box {
    height: calc(100vh - 100px);
    padding: 10px;
    .select-w {
        width: 100px;
    }
    .txt-d {
        margin-left: 10px;
    }
    .img-text-box {
        .img-text-row {
            padding-top: 20px;
            border-top: 1px solid #f3f3f3;

            .img-context {
                display: flex;
                align-content: flex-end;
                .img-box {
                    width: 100px;
                    height: 100px;
                    margin-right: 20px;
                    ::v-deep.uploader-box {
                        margin: 0;
                    }
                }
                .img-but {
                    .tis {
                        margin-top: 20px;
                        font-size: 12px;
                        color: #999;
                    }
                }
            }
        }
    }
}
</style>
